<template>
  <el-dialog title="调薪" :visible="showDialog" @close="btnCancel">
    <div class="changeSalary">
      <div class="infoBox">
        <div class="logo"><img src="@/assets/common/img.jpeg" alt=""></div>
        <div class="info">
          <p>
            <span class="name">{{ user.username }}</span>
          </p>
          <p>
            <span>部门：</span>
            {{ user.departmentName }}
          </p><p>
            <span>入职时间：</span>
            {{ user.timeOfEntry | formatDate }}
          </p>
        </div>
      </div>
      <div>
        <el-form ref="ruleForm" :model="ruleForm" label-width="110px" class="demo-ruleForm" :rules="rules">
          <el-form-item label="调整基本工资" prop="currentBasicSalary">
            <el-input v-model="userInfo.currentBasicSalary" style="width: 220px;" :disabled="true" />
            <span class="Label">-></span>
            <el-input
              v-model="ruleForm.currentBasicSalary"
              style="width: 220px;"
              placeholder="请输入调整后基本工资"
              type="number"
            />
          </el-form-item>
          <el-form-item label="调整岗位工资" prop="currentPostWage">
            <el-input v-model="userInfo.currentPostWage" style="width: 220px;" :disabled="true" />
            <span class="Label">-></span>
            <el-input
              v-model="ruleForm.currentPostWage"
              style="width: 220px;"
              placeholder="请输入调整后岗位工资"
              type="number"
            />
          </el-form-item>
          <el-form-item label="工资合计">
            <el-input v-model="computeCurrentTotal" style="width: 220px;" :disabled="true" />
            <span class="Label">-></span>
            <el-input v-model="computeChangeTotal" style="width: 220px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="调整幅度">
            <el-input v-model="computeChangeSize" style="width: 220px;" :disabled="true" />
          </el-form-item>
          <div class="buttones" style="text-align: center;margin-top: 40px;">
            <el-form-item>
              <el-button type="primary" @click="btnOK">保存</el-button>
              <el-button @click="btnCancel">关闭</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getUserDetailById } from '@/api/user'
import { changeSalary } from '@/api/salarys'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    },
    userInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      user: {},
      ruleForm: {
        currentBasicSalary: '',
        currentPostWage: ''
      },
      rules: {
        currentBasicSalary: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        currentPostWage: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    computeCurrentTotal() {
      let base = 0
      if (this.userInfo.currentBasicSalary != null) {
        base = Number(this.userInfo.currentBasicSalary)
      }
      let post = 0
      if (this.userInfo.currentPostWage != null) {
        post = Number(this.userInfo.currentPostWage)
      }
      return base + post
    },
    computeChangeTotal() {
      let base = 0
      if (this.ruleForm.currentBasicSalary != null) {
        base = Number(this.ruleForm.currentBasicSalary)
      }
      let post = 0
      if (this.ruleForm.currentPostWage != null) {
        post = Number(this.ruleForm.currentPostWage)
      }
      return base + post
    },
    computeChangeSize() {
      return this.computeChangeTotal - this.computeCurrentTotal
    }
  },
  methods: {
    async getUserDetailById(id) {
      this.user = await getUserDetailById(id)
      // console.log(this.user)
    },
    btnCancel() {
      this.ruleForm = {}
      this.$emit('update:showDialog', false)
      this.$refs.ruleForm.resetFields()
    },
    async btnOK() {
      try {
        // 校验
        await this.$refs.ruleForm.validate()
        // 发请求
        await changeSalary({ ...this.ruleForm, userId: this.userId })
        // 提示
        this.$message.success('调薪成功')
        // 通知父页面更新数据
        this.$emit('success')
        // 关闭弹窗
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../../styles/variables.scss';
  .changeSalary{
    .infoBox{
      display: flex;
      border-bottom: solid 1px #ccc;
      margin-bottom: 20px;
      padding: 10px 0 20px 0;
      img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .logo{
        border:solid 1px #ccc;
        width: 102px;
        height: 102px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .info{
        p{
          line-height: 30px;
          .name{font-size: 16px;}
          span{
            font-weight: bold;
            display: inline-block;
            margin-right: 0px;
            margin-left: 10px;
          }
        }
      }
      .buttones{
        text-align: center;
      }
    }
    .Label{
      margin: 0 20px;
      color:#999;
    }
  }
</style>

